<template>
  <el-card>
    <!-- 编辑器容器 -->
    <div
      ref="editorContainer"
      style="border: 1px solid #e5e7eb; min-height: 500px"
    ></div>

    <!-- 操作按钮 -->
    <div class="mt-4 flex gap-2">
      <el-button type="primary" @click="handleGetContent">获取内容</el-button>
      <el-button @click="previewVisible = !previewVisible">
        {{ previewVisible ? "关闭预览" : "预览内容" }}
      </el-button>
    </div>

    <!-- 预览区域 -->
    <div v-if="previewVisible" class="mt-4 p-4 border rounded">
      <div v-html="editorContent"></div>
    </div>
  </el-card>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from "vue";
import { ElMessage } from "element-plus";
import WangEditor from "wangeditor"; // 4.7.15 版本

// 编辑器实例和内容
const editor = ref(null);
const editorContainer = ref(null);
const editorContent = ref("<p></p>");
const previewVisible = ref(false);

// 初始化编辑器
const initEditor = () => {
  // 使用 Vue ref 获取 DOM 元素，确保元素已存在
  if (!editorContainer.value) {
    // ElMessage.error("编辑器容器不存在");
    return;
  }

  try {
    // 创建编辑器实例
    editor.value = new WangEditor(editorContainer.value);

    // 4.x 版本使用 config 而不是 customConfig
    const { config } = editor.value;

    // 菜单配置
    config.menus = [
      "bold",
      "italic",
      "underline",
      "strikeThrough",
      "foreColor",
      "fontSize",
      "fontFamily",
      "head",
      "justify",
    ];

    // 基础配置
    config.height = 500;
    config.zIndex = 100;

    // 配置 onChange 事件
    config.onchange = (html) => {
      editorContent.value = html;
    };

    // 图片上传配置
    config.uploadImgShowBase64 = false; // 不使用 base64 格式
    config.uploadImgServer = ""; // 实际项目中填写你的上传接口
    config.uploadImgMaxSize = 2 * 1024 * 1024; // 2MB
    config.uploadImgMaxLength = 5; // 最多上传5张图片

    // 自定义图片上传（如果不需要后端接口）
    config.customUploadImg = (files, insert) => {
      // 这里使用随机图片作为示例
      const imgUrl = `https://picsum.photos/800/400?random=${Math.random()}`;
      insert(imgUrl);
      ElMessage.success("图片上传成功");
    };

    // 执行创建
    editor.value.create();

    // 设置初始内容
    editor.value.txt.html(editorContent.value);
    const justifyMenu = editor.value.menus.menuList.find(
      (menu) => menu.key === "justify"
    );
    if (justifyMenu) {
      justifyMenu.clickHandler(); // 模拟点击“左对齐”按钮
    }

    // ElMessage.success("编辑器初始化成功");
  } catch (err) {
    // ElMessage.error(`创建编辑器失败：${err.message}`);
    console.error("编辑器初始化错误:", err);
  }
};

// 获取内容
const handleGetContent = () => {
  if (!editor.value) return ElMessage.warning("编辑器未就绪");

  try {
    const content = editor.value.txt.html();
    editorContent.value = content;
    console.log("编辑器内容：", content);
    // ElMessage.success("内容已获取");
  } catch (err) {
    console.log(err);
    // ElMessage.error(`获取内容失败：${err.message}`);
  }
};

// 组件挂载时初始化
onMounted(() => {
  // 使用 nextTick 确保 DOM 完全渲染
  nextTick().then(() => {
    initEditor();
  });
});

// 组件卸载时销毁
onUnmounted(() => {
  if (editor.value && typeof editor.value.destroy === "function") {
    editor.value.destroy();
    editor.value = null;
  }
});
</script>

<style scoped>
/* 预览区域样式 */
:deep(.w-e-text-container) {
  z-index: auto !important;
}
</style>
